<template>
    <div class="brand-detial">
        <div class="brand-header">
            <van-nav-bar title="品牌制造商" left-text="返回" left-arrow @click="$router.back()" />
            <div class="content-top">
                <img :src="getOneData?.app_list_pic_url" alt="" class="top-img">
                <div class="top-name">{{ getOneData?.name }}</div>
            </div>
            <div class="content-bottom">
                {{getOneData?.simple_desc}}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { LS_Pro } from '@/util/storage';
import { onMounted } from 'vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const brandList = ref<HomeNs.IbrandListData[]>([])
onMounted(() => {
    brandList.value = LS_Pro.get('brandList')
})
const getOneData = computed(() => {
    return brandList.value.find(item => item.id.toString() == route.query.id)
})
</script>

<style scoped lang="scss">
.brand-detial {
    width: 100%;
    height: 100%;
    // background: red;

    .brand-header {
        height: 45px;
        width: 100%;
    }

    .content-top {
        width: 100%;
        height: 1.62rem;
        position: relative;

        .top-img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .top-name {
            width: 1.16rem;
            height: 0.45rem;
            border: 1px solid #ffffff;
            position: absolute;
            top: 65%;
            left: 50%;
            transform: translate(-50%, 0);
            text-align: center;
            line-height: 0.45rem;
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 700;
        }
    }
    .content-bottom{
        width: 3.15rem;
        height: 0.58rem;
        padding: 21px 30px;
        background: #ffffff;
        margin-top: 5px;
        font-size: 14px;
        color: #666666;
        letter-spacing: 1px;
    }
}</style>